<template>
	<view class="mask" @click="onTap()" v-if="isShow" @touchmove.stop.prevent="moveStop">
		<view class="dialog"
			:class="{'portrait' : orientation === 'portrait', 'landscape': orientation === 'landscape' }">
			<view class="header">签名</view>
			<view class="content">
				<!-- canvas -->
				<canvas class="handWritingCanvas" canvas-id="handWritingCanvas" id="handWritingCanvas"
					:disable-scroll="false" @touchstart="touchstart" @touchmove="touchmove"
					@touchend="touchend" 
					:style="{width:canvasWidth+'px', height:canvasHeight+'px'}"></canvas>
			</view>
			<view class="footer">
				<view @click="cancel()" class="btn">取消</view>
				<view @click="clear()" class="btn">清除</view>
				<view @click="save()" class="btn">确定</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		canvasToTempFilePath
	} from './lib-finger-paint.js';
	export default {
		name: "lib-finger-paint",
		props: {
			// 方向 portrait: 竖向 landscape：横向
			orientation: {
				type: String,
				default: 'portrait'
			}
		},
		data() {
			return {
				ctx: '', //绘图图像
				points: [], //路径点集合
				isShow: false,
				/** canvas 参数 */
				canvasWidth:null,
				canvasHeight:null,
				/** 裁切参数 */
				startX: Infinity,
				startY: Infinity,
				endX: 0,
				endY: 0,
			};
		},
		
		created() {
			// this.initCanvas();
			
			
		},
		mounted() {
			// this.initCanvas();
			
		},
		watch: {},
		methods: {
			touchstart(e) {
				e.stopPropagation();
				let startX = 0;
				let startY = 0;
				if (this.orientation === 'portrait') {
					startX = e.changedTouches[0].x;
					startY = e.changedTouches[0].y;
				} else if (this.orientation === 'landscape') {
					startX = e.changedTouches[0].y;
					startY = this.canvasHeight - e.changedTouches[0].x;
					if (typeof wx === 'object'){
						// startX = e.changedTouches[0].x;
						// startY = e.changedTouches[0].y;
					}
				}
				let startPoint = {
					X: startX,
					Y: startY
				};
				this.points.push(startPoint);
			},
			touchmove(e) {
				e.stopPropagation();
				let moveX = 0;
				let moveY = 0;
				if (this.orientation === 'portrait') {
					moveX = e.changedTouches[0].x;
					moveY = e.changedTouches[0].y;
				} else if (this.orientation === 'landscape') {
					moveX = e.changedTouches[0].y;
					moveY = this.canvasHeight - e.changedTouches[0].x;
					if (typeof wx === 'object'){
						// moveX = e.changedTouches[0].x;
						// moveY = e.changedTouches[0].y;
						// console.log(moveY);
					}
				}
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				
				this.points.push(movePoint);
				let len = this.points.length;
				if (len >= 2) {
					this.draw();
					this.startX = Math.min(this.startX, moveX);
					this.startY = Math.min(this.startY, moveY);
					this.endX = Math.max(this.endX, moveX);
					this.endY = Math.max(this.endY, moveY);
				}
			},
			touchend() {
				this.points = [];
			},
			draw() {
				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.ctx.moveTo(point1.X, point1.Y);
				this.ctx.lineTo(point2.X, point2.Y);
				this.ctx.stroke();
				this.ctx.draw(true);
			},
			clear() {
				const width = 10000;
				const height = 10000;
				this.ctx.clearRect(0, 0, width, height);
				this.ctx.draw(true);
				this.initCanvas();
			},
			async save() {
				const isTouch = this.startX === Infinity || this.startY === Infinity || this.endX === 0 || this
					.endY === 0;
				if (isTouch) {
					return;
				}
				const result = {
					path: '',
					base64: '',
				};
				const x = Math.max(this.startX - 10, 0);
				const y = Math.max(this.startY - 10, 0);
				const width = this.endX - this.startX + 20;
				const height = this.endY - this.startY + 20;

				const canvasImage = await canvasToTempFilePath({
					canvasId: 'handWritingCanvas',
					component: this,
					x,
					y,
					width: width,
					height: height,
				});

				result.path = canvasImage.path;
				result.base64 = canvasImage.base64;
				this.confirm(result);


			},
			close() {
				this.isShow = false;
			},
			open() {
				this.isShow = true;
				this.initCanvas();
				
				setTimeout(()=>{
					const canvasRef = uni.createSelectorQuery().in(this).select('#handWritingCanvas');
					canvasRef.boundingClientRect((res) => {
					  if (this.orientation === 'portrait') {
					  	this.canvasWidth = res.width;
						this.canvasHeight = res.height;
					  } else if (this.orientation === 'landscape') {
					  	this.canvasWidth = res.height;
					  	this.canvasHeight = res.width;
					  }
					  
					  // this.ctx.translate(225, 0);
					  // this.ctx.translate(50, 50)
					  // this.ctx.rotate(180 * Math.PI / 180)
					}).exec();
				});
			},
			onTap() {
				// if(this.clearPropagation) return
				// this.close()
			},
			confirm(result) {
				this.$emit('onImageCreat', result);
				this.close();
			},
			cancel() {
				this.$emit('onCancel');
				this.close();
			},
			initCanvas() {
				// 创建 canvas 绘图
				this.ctx = uni.createCanvasContext('handWritingCanvas', this);
				// 线条的宽度
				this.ctx.setLineWidth(4);
				// 设置线条的端点样式
				this.ctx.setLineCap('round');
				// 设置线条的交点样式
				this.ctx.setLineJoin('round');
				// 设置边框颜色
				this.ctx.setStrokeStyle('#000000');
				
				this.startX = Infinity;
				this.startY = Infinity;
				this.endX = 0;
				this.endY = 0;

			},
			moveStop() {},
		},
	}
</script>

<style lang="scss" scoped>
	@import './lib-finger-paint.scss';
</style>
